.books
  flex: 1;
  card-page();
  padding: 16px;
  .book-list
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .book
      margin-bottom: 16px;
      card-lignt();
      +pc-layout()
        width: 48%;
        &:hover
          .book-image
            transform: rotateY(0deg) !important;
      +sp-layout()
        width: 100%;
      .book-info
        display: flex;
        justify-content: flex-start;
        padding: 16px 12px 0;
        line-height: 1.7;
        .book-image-container
          display: flex;
          align-items: center;
          justify-content: center;
          perspective: 600px;
          .book-image
            width: 100px;
            height: 150px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateY(-30deg);
            transition: 1s ease;
            animation: 1s ease 0s 1 bookRotate;
            &:hover
              transform: rotateY(0deg);
            & > :first-child
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              transform: translateZ(12.5px);
              background-color: #eee;
              border-radius: 0 2px 2px 0;
              box-shadow: 5px 5px 20px #666;
              box-shadow: $card-shadow-light;
              object-fit: cover;
            &::before
              position: absolute;
              content: ' ';
              background-color: blue;
              left: 0;
              top: 3px;
              width: 23px;
              height: 144px;
              transform: translateX(84.5px) rotateY(90deg);
              background: linear-gradient(
                90deg,
                #fff 0%,
                #f9f9f9 5%,
                #fff 10%,
                #f9f9f9 15%,
                #fff 20%,
                #f9f9f9 25%,
                #fff 30%,
                #f9f9f9 35%,
                #fff 40%,
                #f9f9f9 45%,
                #fff 50%,
                #f9f9f9 55%,
                #fff 60%,
                #f9f9f9 65%,
                #fff 70%,
                #f9f9f9 75%,
                #fff 80%,
                #f9f9f9 85%,
                #fff 90%,
                #f9f9f9 95%,
                #fff 100%
              );
            &::after
              content: ' ';
              position: absolute;
              top: 0;
              left: 0;
              width: 100px;
              height: 150px;
              transform: translateZ(-12px);
              background-color: #444;
              border-radius: 0 2px 2px 0;
           .book-source-url
              fillParent(absolute, 2)
        .book-meta
          margin-left: 14px;
          h3
            font-size: $font-size-large;
          a
            transition: color 0.3s ease-out;
            &:hover
              color: $link-color;
        .icon-star
          margin-right: 4px;
          color: $purple;
      .book-desc
        padding: 12px;

